<template>
  <button 
    class="button" 
    :class="'button-'+ buttonState" 
    :disabled="buttonState == 'disabled'"
    @click="handleClick"
    >
    {{name}}
  </button>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: '登陆'
    },
    buttonState: {
      type: String,
      default: 'unselected'
    }
  },
  methods: {
    handleClick() {
      this.$emit('click')
    }
  }
}
</script>

<style lang="stylus" scoped>
  .button 
    height 44px 
    text-align center 
    line-height 44px
    width calc((100% - 10px) / 2)
</style>